<template>
  <a-drawer
    :visible="visible"
    :title="title"
    width="1100"
    :footer-style="{ textAlign: 'right' }"
    :bodyStyle="{
      background: '#f9fafb',
    }"
    @close="onClose"
  >
    <a-form
      :label-col="{
        span: 2,
      }"
    >
      <a-form-item label="平台" v-bind="validateInfos.platform">
        <a-select
          v-model:value="modelRef.platform"
          placeholder="请选择"
          :options="platformOptions"
          style="width: 276px"
          allowClear
        ></a-select>
      </a-form-item>
      <a-form-item label="分组名称" v-bind="validateInfos.groupName">
        <a-input
          v-model:value="modelRef.groupName"
          placeholder="请输入分组名称"
          style="width: 276px"
        />
      </a-form-item>
    </a-form>
    <a-table
      :dataSource="dataSource"
      :columns="columns"
      :pagination="pagination"
      @change="handleTableChange"
    >
      <template #title>
        <a-row justify="space-between" align="middle">
          <a-col>账户数量：0/500</a-col>
          <a-col>
            <a-button
              type="primary"
              style="background: #2878FF; border: none; border-radius: 6px"
              @click="addAccount"
            >
              <template #icon>
                <plus-outlined />
              </template>
              新增账号
            </a-button>
          </a-col>
        </a-row>
      </template>
    </a-table>
    <template #footer>
      <a-button
        type="primary"
        ghost
        style="
          margin-right: 8px;
          border: 1px solid #e0e0e6;
          color: #000;
          border-radius: 6px;
        "
        @click="onClose"
        >取消</a-button
      >
      <a-button
        type="primary"
        style="background: #2878FF; border: none; border-radius: 6px"
        @click="onConfirm"
      >
        保存
      </a-button>
    </template>

    <!-- 新增账号 -->
    <AddAccount
      :visible="visibleAccount"
      @onCancel="visibleAccount = false"
      @onConfirm="onConfirmAccount"
    />
  </a-drawer>
</template>

<script>
import { defineComponent, reactive, toRefs, computed } from "vue";
import { PlusOutlined } from "@ant-design/icons-vue";
import AddAccount from "./AddAccount.vue";
import { Form } from "ant-design-vue";
const useForm = Form.useForm;

export default defineComponent({
  name: "AddGrouping",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    id: {
      type: [Number, String],
      default: 0,
    },
  },
  components: { PlusOutlined, AddAccount },
  setup(props, { emit }) {
    const state = reactive({
      count: 0,
      platformOptions: [
        {
          label: "抖音",
          value: "doouyin",
        },
        {
          label: "快手",
          value: "kuaishou",
        },
      ],

      dataSource: [
        {
          fansNum: "2",
        },
      ],

      columns: [
        {
          title: "ID",
          dataIndex: "id",
          key: "id",
        },
        {
          title: "头像",
          dataIndex: "avatar",
          key: "avatar",
        },
        {
          title: "账号",
          dataIndex: "account",
          key: "account",
        },
        {
          title: "粉丝数",
          dataIndex: "fansNum",
          key: "fansNum",
          sort: true,
        },
        {
          title: "点赞数",
          dataIndex: "likeCount",
          key: "likeCount",
          sort: true,
        },
        {
          title: "授权状态",
          dataIndex: "empowerStatus",
          key: "empowerStatus",
        },
        {
          title: "分组名称",
          dataIndex: "groupName",
          key: "groupName",
        },
        {
          title: "操作",
          dataIndex: "action",
          key: "action",
        },
      ],

      loading: false,
      page: 1,
      pageSize: 10,
      total: 0,

      visibleAccount: false,
    });

    const modelRef = reactive({
      platform: undefined,
      groupName: "",
    });
    const rulesRef = reactive({
      platform: [
        {
          required: true,
          message: "请选择平台",
        },
      ],
      groupName: [
        {
          required: true,
          message: "请输入分组名称",
        },
      ],
    });
    const { resetFields, validate, validateInfos } = useForm(
      modelRef,
      rulesRef
    );

    const pagination = computed(() => ({
      total: state.total,
      current: state.page,
      pageSize: state.pageSize,
      showSizeChanger: true,
      showQuickJumper: true,
    }));

    const handleTableChange = (pager, filters, sorter) => {
      state.page = pager.current;
      state.pageSize = pager.pageSize;
    };

    const addAccount = () => {
      validate().then(() => {
        state.visibleAccount = true;
      });
    };

    const onClose = () => {
      resetFields();
      emit("onCancel");
    };

    const onConfirm = () => {
      validate().then(() => {
        emit("onConfirm");
      });
    };

    const onConfirmAccount = () => {
      state.visibleAccount = false;
    };

    const title = computed(() => {
      return props.id ? "编辑分组" : "新增分组";
    });

    return {
      title,
      ...toRefs(state),
      onConfirm,
      onClose,
      validateInfos,
      resetFields,
      modelRef,
      addAccount,
      pagination,
      handleTableChange,
      onConfirmAccount,
    };
  },
});
</script>

<style lang="less" scoped></style>
